<style lang="less">
    @import './login.less';
</style>

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    Wenjoying-管理后台
                    <Button v-if="pwd" size="small" type="text" @click="toggle">短信登录</Button>
                    <Button v-if="sms" size="small" type="text" @click="toggle">密码登录</Button>
                </p>
                <div class="form-con">
                    <Form ref="loginForm" :model="form" :rules="rules">
                        <FormItem prop="mobile">
                            <Input v-model="form.mobile" placeholder="请输入账号">
                                <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem v-if="pwd" prop="password">
                            <Input type="password" v-model="form.password" placeholder="请输入密码">
                                <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem v-if="sms" prop="smsCode">
                            <Input v-model="form.smsCode" placeholder="请输入短信验证码" style="width:150px;">
                                <span slot="prepend">
                                    <Icon :size="4" type="compose"></Icon>
                                </span>
                            </Input>
                            <span style="float: right;margin-top: -32px;">
                                <Button v-if="time==60" type="ghost" @click="getSms">发送短信</Button>
                                <Button v-if="time>=0&&time<60" disabled type="ghost">已发送({{time}})</Button>
                            </span>
                        </FormItem>
                        <FormItem v-if="pwd" prop="password">
                            <Input type="password" v-model="form.one_code" placeholder="请输入谷歌验证码">
                                <span slot="prepend">
                                    <Icon :size="14" type="social-google"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem v-if="pwd" prop="captcha">
                            <Input v-model="form.captcha" placeholder="请输入图形验证码" style="width:150px;">
                                <span slot="prepend">
                                    <Icon :size="4" type="compose"></Icon>
                                </span>
                            </Input>
                            <span style="float: right;margin-top: -31px;">
                                <img :src="captcha.img" @click="getCaptcha">
                            </span>
                        </FormItem>
                        <FormItem>
                            <Button @click="handleSubmit" type="primary" long>登录</Button>
                        </FormItem>
                    </Form>
                    <p class="login-tip">Wenjoying@126.com</p>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie';

export default {
    data () {
        return {
            pwd: true,
            sms: false,
            time: 60,
            captcha: null,
            form: {
                mobile: '17682344799',
                password: '123456',
                smsCode: '1234',
                one_code: '',
                captcha: '',
                key: '',
            },
            rules: {
                mobile: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                    { type: 'string', min: 6, message: '最少为6位', trigger: 'blur' },
                    { type: 'string', max: 20, message: '最多为20位', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        /**切换登录方式*/
        toggle () {
            this.pwd = !this.pwd;
            this.sms = !this.sms;
        },

        /**获取图形验证码*/
        getCaptcha () {
            this.$api.admin_admin_captcha().then((res) => {
                let d = res.data;
                if (d.code == 0) {
                    this.captcha = d.data;
                    this.form.key = this.captcha.key;
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            });
        },

        /**发送短信验证码*/
        getSms () {
            let re = /^1[34578]\d{9}$/;
            if (re.test(this.form.mobile) && this.sms) {
                this.$api.admin_admin_sendSms({mobile:this.form.mobile}).then((res) => {
                    let d = res.data;
                    if (d.code == 0) {
                        this.timer();
                    } else {
                        this.$Notice.error({
                            title: 'Error Warning',
                            desc: `Error：${d.msg}<br>`
                        });
                    }
                });
            }
        },

        /**短信倒计时*/
        timer () {
            if (this.time > 0) {
                this.time--;
                setTimeout(this.timer, 1000);
            } else {
                this.time = 60;
            }
        },

        /**提交表单*/
        handleSubmit () {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.$api.admin_auth_login(this.form).then((res) => {
                        let d = res.data;
						if (d.code == 0) {
						    let access_token = 'Bearer' + d.data.token;
                            sessionStorage.setItem('access_token', access_token);
                            this.$api.set_access_token(access_token);
                            this.getUserInfo();
						} else {
						    this.getCaptcha();
                            this.$Notice.error({
                                title: 'Error Warning',
                                desc: `Error：${d.msg}<br>`
                            });
                        }
					});
                }
            });
        },

        /**获取用户信息*/
        getUserInfo (){
            this.$api.admin_auth_me().then((res) => {
                let d = res.data;
                if (d.code == 0) {
                    Cookies.set('userInfo', d.data);
                    Cookies.set('access', d.data.permissions);//权限
                    this.$store.commit('setAvator', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg');
                    this.$router.push({
                        name: 'home_index'
                    });
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            });
        },
    },
    created () {
        if (this.pwd) {
            this.getCaptcha();
        }
    }
};
</script>
